<template>
    <div class="login1">
        <div class="logo">
            <img src="@/assets/images/login.png" alt="" />
        </div>
        <van-form>
            <van-field :class="{ active: active == 1 }" v-model="form.mobile" name="用户名" label="用户名" placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"   @blur="active = ''" @focus="active = 1"/>
            <van-field :class="{ active: active == 2 }" v-model="form.password" type="password" name="密码" label="密码" placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]" @blur="active = ''" @focus="active = 2" />
        </van-form>
        <form>
            <div style="color: #999; font-size: 20px">
                <p @click="$router.push('/setPassword')">找回密码</p>
                <p @click="$router.push('/smslogin')">注册/验证码登录</p>
            </div>
            <div class="login">
                <p @click="toIndex">登录</p>
            </div>
            <div style="color: #999; font-size: 20px;margin-left: 970px;">
               <p>第三方登录</p>
            </div>
        </form>
        <div class="bottom">
            <div class="one">
                <img src="@/assets/images/wechat.png" alt="">
                <span>微信登录</span>
            </div>
            <div class="one">
                <img src="@/assets/images/QQ.png" alt="">
                <span>QQ登录</span>
            </div>
        </div>
    </div>
</template>

<script>
import { getLogin } from "@/http/login"
export default {
    data() {
        return {
            active: "",
            form: {
                password:"",
                mobile:"",
                type: 1,
                client: 1
            }
        }
    },
    methods: {
        async toIndex() {
            let res = await getLogin(this.form)
            console.log(res);
            if (res.code == 200) {
                localStorage.setItem("msmktoken",res.data.remember_token)
                this.$router.push("/user/index")
            } else {
                this.$Toast.fail(res.msg)
            }
        }
    }
}
</script>

<style lang="scss">
.logo {
    width: 100vw;
    height: 200px;
    text-align: center;

    img {
        width: 525px;
        height: 115px;
        margin: 50px;
    }
}
.van-field {
     width: 80vw;
     display: flex;
     justify-content: space-between;
     margin: 50px auto;
 }

form {
    font-size: 30px;

    >div {
        width: 80vw;
        display: flex;
        justify-content: space-between;
        margin: 50px auto;
    }

    input {
        border: none;
        width: 100%;
    }
}

.active {
    border-bottom: 1px solid red;
}

.login {
    width: 80vw;
    height: 50px;
    border-radius: 20px;
    background: orangered;

    p {
        color: #fff;
        margin: 0 auto;
    }
}
.bottom{
    width: 60vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    line-height: 50px;
    .one{
        font-size: 16px;
        color: #999;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        span{
            margin-left: 15px;
        }
    }
}
</style>

